<html>
    <style></style>
    <body>

        <div id='app'>
            <!-- <div>{{name}}</div> -->
            <button @click='btnFun("child1")'>BTN1</button>
            <button @click='btnFun("child2")'>BTN2</button>
            <button @click='btnFun("child3")'>BTN3</button>

            <keep-alive include='Child1,Child2' exClude='Child3' max='10'>
                <component :is="comTab"></component>
            </keep-alive>
            

            <child1></child1>
            <child2></child2>
            <child3></child3>
        </div>


        <script src='./vue.js'></script>
        <script>
             let child1 = {
                template:`
                    <div>CHILD111</div>
                `
            }
            let child2 = {
                template:`
                    <div>CHILD222</div>
                `
            }
            let child3 = {
                template:`
                    <div>CHILD33332</div>
                `
            }
            
            new Vue({
                el:'#app',
                data:{
                    comTab:child1
                },
                components:{
                    child1,
                    child2,
                    child3,
                },
                methods: {
                    btnFun(val){
                        console.log(val)
                    }
                },
            })


           
        </script>
    </body>
</html>